<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <style>
        .wrap {
            width: 100%;
            display: flex;
            margin: 0.2rem 0 0 0;
            position: relative;
        }

        /*左侧的导航样式*/
        .nav_left {
            width: 21.1875rem;
            overflow: scroll;
        }

        .nav_left::-webkit-scrollbar {
            display: none;
        }

        .nav_content {
            white-space: nowrap;
            padding: 0 0.7rem;
        }

        .nav_content span {
            display: inline-block;
            padding: 0.4rem 0.6rem;
            font-size: 0.875rem;
        }

        .nav_content .active {
            border-bottom: 2px solid #7f4395;
            color: #7f4395;
        }

        .nav_left,
        .down {
            float: left;
        }

        /*右侧导航部分*/
        .down {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .gray {
            color: gray;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <span>姓名:</span>
            <input type="text" v-model.trim="userName" />
        </div>
        <div>
            <span>年龄:</span>
            <input type="number" v-model.number="userAge" />
        </div>
        <div>
            <span>性别:</span>
            <select v-model="gender">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div>
            <button @click.prevent="change">添加/修改</button>
        </div>
        <div>
            <table border="1" cellpadding="10" cellspacing="0" v-if="arr.length > 0">
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item, index) in arr" :key="item.id">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.sex }}</td>
                    <td>
                        <button @click="del(item.id)">删除</button>
                        <button @click="edit(index)">编辑</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                userName: "",
                userAge: 0,
                gender: "男",
                editIndex: null, // 保存正在编辑的对象的索引, 千万不能给0和0以上的值(默认上来就是编辑状态)
                arr: [
                    {
                        id: 1,
                        name: "张三",
                        age: 19,
                        sex: "男",
                    },
                    {
                        id: 2,
                        name: "翠花",
                        age: 21,
                        sex: "女",
                    },
                    {
                        id: 3,
                        name: "熊大",
                        age: 22,
                        sex: "男",
                    },
                    {
                        id: 4,
                        name: "熊二",
                        age: 21,
                        sex: "男",
                    },
                ],
            },
            methods: {
                // 删除
                del(id) {
                    this.arr = this.arr.filter(item => item.id !== id)
                },
                // 添加
                change() {
                    const newObj = {
                        id: +new Date(),
                        name: this.userName,
                        age: this.userAge,
                        sex: this.gender,
                    }
                    // 判断
                    if (this.editIndex === null) {
                        if (this.username !== '' && this.userAge > 0) {
                            this.arr.unshift(newObj)
                        } else {
                            return alert('请输入不为空的姓名和正确年龄')
                        }
                    } else {
                        this.arr.splice(this.editIndex, 1, newObj)
                        this.editIndex = null
                    }
                    // 清空表单
                    this.userName = ''
                    this.userAge = 0,
                    this.gender = "男"
                },
                // 编辑
                edit(index) {
                    const nowObj = this.arr[index]
                    this.userName = nowObj.name
                    this.userAge = nowObj.age
                    this.gender = nowObj.sex
                    this.editIndex = index
                }
            },
        })
    </script>
</body>

</html>